<template>
  <!-- vp-raw的作用是隔绝vitepress样式对当前组件的样式影响 -->
  <div class="vp-raw">
    <vxe-grid v-bind="gridOptions">
      <template #toolbar_buttons>
        <vxe-button @click="gridOptions.align = 'left'">居左</vxe-button>
        <vxe-button @click="gridOptions.align = 'center'">居中</vxe-button>
        <vxe-button @click="gridOptions.align = 'right'">居右</vxe-button>
      </template>

      <template #name_header>
        <div class="first-col">
          <div class="first-col-top">名称</div>
          <div class="first-col-bottom">序号</div>
        </div>
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

// vxe-table配置
const gridOptions = reactive({
  // 是否显示边框
  border: true,
  // 表格高度
  height: 300,
  // 表头和数据对齐方式
  align: null,
  // 列配置
  columnConfig: {
    // 是否可以调整列宽度
    resizable: true,
  },
  columns: [
    { type: 'seq', width: 50 },
    { field: 'name', title: '名字', slots: { header: 'name_header' } },
    { field: 'sex', title: '性别' },
    { field: 'address', title: '地址' },
  ],
  // 工具栏配置
  toolbarConfig: {
    slots: {
      // 按钮栏slot配置
      buttons: 'toolbar_buttons',
    },
  },
  // 表格数据
  data: [
    { id: 10001, name: 'Test1', nickname: 'T1', role: 'Develop', sex: 1, age: 28, address: 'Shenzhen' },
    { id: 10002, name: 'Test2', nickname: 'T2', role: 'Test', sex: 0, age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', nickname: 'T3', role: 'PM', sex: 1, age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', nickname: 'T4', role: 'Designer', sex: 0, age: 23, address: 'Shenzhen' },
    { id: 10005, name: 'Test5', nickname: 'T5', role: 'Develop', sex: 0, age: 30, address: 'Shanghai' },
    { id: 10006, name: 'Test6', nickname: 'T6', role: 'Designer', sex: 0, age: 21, address: 'Shenzhen' },
    { id: 10007, name: 'Test7', nickname: 'T7', role: 'Test', sex: 1, age: 29, address: 'Shenzhen' },
    { id: 10008, name: 'Test8', nickname: 'T8', role: 'Develop', sex: 1, age: 35, address: 'Shenzhen' },
  ],
})
</script>
<style lang="less" scoped>
.first-col {
  position: relative;
  height: 20px;
  &:before {
    content: '';
    position: absolute;
    left: -15px;
    top: 10px;
    width: 170px;
    height: 1px;
    transform: rotate(18deg);
    background-color: #e8eaec;
  }
  .first-col-top {
    position: absolute;
    right: 4px;
    top: -10px;
  }
  .first-col-bottom {
    position: absolute;
    left: 4px;
    bottom: -10px;
  }
}
</style>
